<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
</head>
<body>
	<div class="ibox-content" id="warp" >
		<form class="form-horizontal" id="dataform"
			onsubmit="javascripr:return false;">
<input type="hidden" name="tokenUrl" value="${tokenUrl}">	 
		<input type="hidden" name="token" value="${token}">
			<c:if test="${obj ne null }">
				<input type="hidden" name="caseId" value="${obj.caseId }">
			</c:if>
				<input type="hidden" name="projId" value="${param.projId }">
			<div class="form-group">
				<label class="col-sm-1 control-label">标题<span
					class="text-danger">*</span></label>
				<div class="col-sm-10">
					<input type="text" dataType="*" class="form-control" name="title" maxlength="200"
						value="<c:out value="${obj.title }"></c:out>" datatype="*1-200"
						nullmsg="标题不能为空">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label">功能模块<span
					class="text-danger">*</span></label>
				<div class="col-sm-4">
					<select class="form-control select2" size="1" name="modelId"
						id="parentId">
						<option value="" selected="selected">请选择功能模块</option>
					</select>
				</div>
				<label class="col-sm-1 control-label">用例类型<span
					class="text-danger">*</span></label>
				<div class="col-sm-4">
					<select class="form-control autoFull" name="caseType" dataType="*"
						data-url="${path}/admin/dataDictionary/showDataDictionary"
						data-filed="name" data-value="name" data-param="{type:'用例类型'}"
						data-def="${obj.caseType}">
						<option value="">--请选择用例类型--</option>
					</select>

				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label">优先级<span
					class="text-danger">*</span></label>
				<div class="col-sm-4">
					<select class="form-control " name="grade" dataType="*">
						<option <c:if test="${obj.grade eq 1}">selected="selected"</c:if>
							value="1">1</option>
						<option <c:if test="${obj.grade eq 2}">selected="selected"</c:if>
							value="2">2</option>
						<option <c:if test="${obj.grade eq 3}">selected="selected"</c:if>
							value="3">3</option>
						<option <c:if test="${obj.grade eq 4}">selected="selected"</c:if>
							value="4">4</option>
					</select>

				</div>
				<label class="col-sm-1 control-label">适用阶段<span
					class="text-danger">*</span></label>
				<div class="col-sm-4">
					<select class="form-control autoFull select2" name="userStage"
						dataType="*" multiple="multiple"
						data-url="${path}/admin/dataDictionary/showDataDictionary"
						data-filed="name" data-value="name" data-param="{type:'用例适用阶段'}"
						data-def="${obj.userStage}">
					</select>

				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label">关键词</label>
				<div class="col-sm-10">
					<input type="text"   class="form-control" maxlength="200"
						name="keyworld" value="<c:out value="${obj.keyworld }"></c:out>"
						>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-1 control-label">前置条件</label>
				<div class="col-sm-10">
					<textarea rows="4"   class="form-control" maxlength="1000"
						 name="beforCondition"><c:out
							value="${obj.beforCondition }"></c:out></textarea>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-1 control-label">步骤<span
					class="text-danger">*</span></label>
				<div class="col-sm-10">
					<table class="table table-bordered text-center"  >
						<thead>
							<tr>
								<th>编号</th>
								<th>步骤</th>
								<th>预期</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in steps" :key="item.stepNo">
								<td>{{item.stepNo}}
								<input type="hidden" :name="'stepsNoHistory['+item.stepNo+'].stepNo'" :value="item.stepNo"  >
								</td>
								<td><textarea maxlength="1000" rows="3" class="form-control" :name="'stepsNoHistory['+item.stepNo+'].title'" v-model="item.title" ></textarea></td>
								<td><textarea maxlength="1000" rows="3" class="form-control"  :name="'stepsNoHistory['+item.stepNo+'].expectation'" v-model="item.expectation" ></textarea></td>
								<td>
									<div class="btn-group" role="group" aria-label="Basic example">
										<button v-on:click="addStep(item.stepNo,0)" type="button" class="btn btn-default btn-sm" title="之前添加">
											<i class="fa fa-plus"></i>
										</button>
										<button type="button" class="btn btn-danger btn-sm" title="删除" v-on:click="delStep(item.stepNo)">
											<i class="fa fa-close"></i>
										</button>
										<button  v-on:click="addStep(item.stepNo,1)"  type="button" class="btn btn-default btn-sm" title="之后添加">
											<i class="fa fa-plus"></i>
										</button>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-1 control-label">备注</label>
				<div class="col-sm-10">
					<textarea rows="4"   class="form-control" maxlength="500"
						 name="remark"><c:out
							value="${obj.remark }"></c:out></textarea>
				</div>
			</div>

			<div class="form-group ">
				<div class="col-sm-12 text-center">
					<a href="javascript:;" onclick="myForm.submit()"
						class="btn btn-success radius"><i class="fa fa-check"></i> 保存</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a class="btn btn-danger radius" href="javascript:;"
						onclick="MTools.closeForm()"><i class="fa fa-close"></i> 关闭</a>
				</div>
			</div>
		</form>
	</div>
</body>

<script src="${path }/resource/js/vue.js"></script>
<script type="text/javascript">
var steps=[{stepNo:1,title:'',expectation:''}];
<c:if test="${obj ne null }">

steps=[];
initSteps();

</c:if>

function initSteps(){
	$.AjaxProxy({
		a : false,
		c : false,
		p:{caseId:"${obj.caseId}"}
	}).invoke("${path}/admin/userCase/findStep",function(loj){
		 
		for(var i=0 ;i <loj.getRowCount();i ++){
			var step={stepNo:loj.getString(i,"stepNo"),title:loj.getString(i,"title"),expectation:loj.getString(i,"expectation")};
			steps.push(step);
		}
	
		console.log("steps",steps);
	});
}

var app=new Vue({
	el:"#warp",
	data: {
	    steps: steps
	  },
	  methods:{
		  //新增步骤
		  addStep:function(no,type){
			  //新步骤编号
			  no= no+type;
			  var newStep={stepNo:no,title:' ',expectation:''}
			  app.steps.splice(no-1, 0, newStep);
			  for(var i=no;i<app.steps.length;i++){
				  app.steps[i].stepNo=app.steps[i].stepNo+1;
			  }
		  },
	  	//删除步骤
	  	delStep:function(no){
	  		if(app.steps.length>1){
	  			app.steps.splice(no-1, 1);
				  for(var i=no-1;i<app.steps.length;i++){
					  app.steps[i].stepNo=app.steps[i].stepNo-1;
				  }
	  		}else{
	  			layer.msg("最少需要一个步骤",{icon:2});
	  		}
	  	}
	  }
});
	$(".select2").select2({
		'width' : '100%'
	});
	MTools.autoFullSelect();
	var myForm = MForm.initForm({
		invokeUrl : "${path}/admin/userCase/addOrModify",
		afterSubmit : function() {
			parent.myGrid.serchData();
		},
	});
	initModelList();

	//初始化项目模块
	function initModelList(projId) {
		$.AjaxProxy({
			a : false,
			c : false
		}).invoke(
				"${path}/admin/interfaceCate/all?projId="
						+ $(":input[name=projId]").val(), function(loj) {
					$("#parentId").createSelectTree(loj.attr("result").rows, {
						append : false,
						defaultValue : "${obj.modelId}"
					});
				});
	}
	
	
	
	
	
	
	
	
</script>
</body>
</html>